<template>
  <div class="nav_outer">
    <Header>我的简历</Header>
    <div class="content">
       <div class="base flex_bet" @click="navito('resumeedit')">
         <div class="base_name">
           <h4>{{user.nickname || user.name}} <img src="../assets/img/bianjifill@2x.png" alt="" class="icon-edit" style="margin-left: 10px;"></h4>
           <p>{{user.phone}}</p>
         </div>
         <div class="ava_wrap">
           <img :src="user.actor | imgpre" alt="" v-if="user.actor">
         </div>
       </div>
       <div class="willjob" @click="saveOrEditExpect">   
         <div class="flex_bet">
           <span class="marktitle">求职意向</span>
           <img src="../assets/img/bianjifill@2x.png" alt="" class="icon-edit">
         </div>
         <div class="flex_bet wills">
           <span>期望城市: {{expects.length ? expects[0].expectWorkCityName : '' }}</span>
           <span>期望薪资: {{expects.length ? expects[0].expectSalary : '' }}</span>
         </div>
         <div class="flex_bet wills">
           <span>期望岗位:  {{expects.length ? expects[0].expectJobTitle : '' }}</span>
         </div>
       </div>
       <div class="prejobs">
         <div class="flex_bet">
           <span class="marktitle">工作经历</span>
         </div>
         <div class="flex_bet prejob" v-for="item in expirences" v-bind:key="item.id" :data-id="item.id" @click="editexpirence(item)">
           <div>{{item.factoryName}} <span>{{item.workTitle}}</span></div>
           <div class="time">
             <span>{{ item.workFrom | splidate }}-{{ (item.workTo || '至今') | splidate }}</span>
             <span class="mui-icon mui-icon-arrowright"></span>
           </div>
         </div>

         <div class="btn add_job" @click="addExpirence">
           <span>+</span>添加工作经历
         </div>
       </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
      user:{},
      expects: [],
      expirences: []
    }
  },
  mounted() {
    let mui = this.mui,that=this;
    mui.init({ 
      gestureConfig:{
        tap: true //默认为true 
      } 
    });
  },
  created(){
    this.user = this.$store.state.user;
    this.loadUinfo();
    this.loadexpects();
    this.loadExperiance();
  },
  methods: {
    navito(url){
      this.$router.push({path:url}); 
    },
    loadUinfo(){
      let id = localStorage.getItem('uid');
      this.Http.get(`/yzj/app/customer/${id}`,null).then((res)=>{
        this.user = res;
      })
    },
    loadexpects(){
      this.Http.get(`/yzj/personal/app/job_intention`,null).then((res)=>{
        this.expects = res;
      })
    },
    saveOrEditExpect(){
      if(this.expects.length){
        localStorage.setItem('expect',JSON.stringify(this.expects[0]));
        this.navito('expectjob');
      }else{
        localStorage.removeItem('expect');
        this.navito('expectjob');
      }
    },
    editexpirence(item){
      this.$router.push({path:`/addexpirence?eid=${item.id}`}); 
    },
    loadExperiance(){
      this.Http.get(`/yzj/personal/app/work_experiences`,null).then((res)=>{
        this.expirences = res;
      })
    },
    addExpirence(){
      this.$router.push({path:'/addexpirence'}); 
    }
  },
  components: {
    Header
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  body{
      background: #F5F5F5!important;
  }
  .content{
    color: #666;
    .icon-edit{
      width: px2em(28);
      vertical-align: middle;
    }
    >div{
      background: #fff;
      margin-top: px2em(20);
      padding: px2em(30);
    }
    .ava_wrap{
      width: px2em(130);
      height: px2em(130);
      background: #ccc;
      border-radius: 50%;
      overflow: hidden;
      >img{
        width: 100%;
      }
    }
    .base_name{
      >h4{
        margin-bottom: px2em(50);
      }
    }
    .marktitle{
      font-size: 1.1em;
      font-weight: bold;
    }
    .wills{
      margin-top: px2em(36);
    }
    .prejob{
      margin-top: px2em(36);
      span{
        font-size: 0.8em;
      }
    }
    .add_job{
      border: 1px solid #FFAF1C;
      border-radius: 5px;
      height: px2em(74);
      line-height: px2em(74);
      color: #FFAF1C;
      text-align: center;
      margin-top: px2em(74);
      >span{
        font-size: 1.6em;
        line-height: px2em(45);
        vertical-align: middle;
        margin-right: px2em(20);
      }
    }
  }
</style>